<template>
    <div style="width: 1000px;padding: 10px">
        <div style="width: 700px; margin-bottom:60px;float: left">
            <div style="width: 980px; margin-bottom:60px;">

                <div>
                    <div style="display:flex;">

                        <div style="flex: none"><h3 style="margin: 15px 0 10px 20px">小说简介</h3></div>

                    </div>
                    <div style="display: flex;flex-wrap: wrap;">
                        <div style="flex: none;">
                            <div style="width: 700px;padding: 15px;">
                                <div style="width: 100px ;float: left">
                                    <img style="width: 100%;height: 100%;border-radius: 4%"
                                         :src="book.cover">
                                </div>
                                <div style=" width: 550px;font-size: 14px;float: left;padding: 0 20px">
                                    <h4 style="overflow: hidden; text-overflow:ellipsis;white-space: nowrap;">
                                        {{book.name}}</h4>
                                    <div style="margin: 6px 0;display: flex;font-size: 12px">
                                        <div>标签：{{book.bookLabel}}</div>
                                        <div style="margin-left: 20px">类型：{{book.bookType}}</div>
                                    </div>

                                    <div style="display:flex;margin: 6px 0;font-size: 12px">
                                        作者:{{nickName}}
                                        <div style="padding-left: 10px"></div>
                                    </div>
                                    <div style="margin: 6px 0;display: flex;font-size: 12px">
                                        <div>50观看</div>
                                        <div style="margin-left: 20px">50收藏</div>
                                    </div>
                                    <div style=" font-size:12px;line-height:1.8em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                                        简介: {{book.intro}}
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div style="width: 700px;padding: 5px 15px;display: flex">
                            <div style="flex:none;margin-right:20px;height: 36px;width:100px;font-size: 16px;line-height: 36px;color:#FFF;background-color: #ff7836;text-align: center;border-radius: 2px">
                                点击阅读
                            </div>
                            <div @click="addBookrack"
                                 style="flex:none;margin-right:20px;height: 36px;width:100px;font-size: 16px;line-height: 36px;color:#FFF;background-color: #038139;text-align: center;border-radius: 2px">
                                加入书架
                            </div>
                            <div @click="addFavorite"
                                 style="flex:none;margin-right:20px;height: 36px;width:100px;font-size: 16px;line-height: 36px;color:#FFF;background-color: #ffaf0a;text-align: center;border-radius: 2px">
                                加入收藏
                            </div>
                            <div @click="openMessage"
                                 style="flex:none;margin-right:20px;height: 36px;width:100px;font-size: 16px;line-height: 36px;color:#FFF;background-color: #59ffbb;text-align: center;border-radius: 2px">
                                用户留言
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 700px;">
                    <h3 style="margin: 15px 0 10px 20px">小说章节</h3>
                    <div style="background-color: #5fb878">
                        <div style="width: 110px;height:30px; float: left; font-size:12px;padding: 0 10px;
                        line-height:30px;text-align: center;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;border-bottom: #dddddd 1px solid"
                             v-for="c in chapter" :key="c.id">
                            <router-link :to="{name:'browseChapter', params: {id:c.id}}">
                                {{c.name}}
                            </router-link>
                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div style="width: 250px;height:500px; float: left;">
            <div style="padding: 30px">
                <h4 style="text-align: center">猜你喜欢</h4>
                <div v-for="b in rankList" :key="b.id"
                     style="width:240px;font-size: 12px;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;padding:5px 0">
                    <router-link :to="{name:'bookInformation', params: {id:b.id}}" target="_blank">
                        {{b.name}}
                    </router-link>
                </div>
            </div>
        </div>
        <el-dialog title="留言" v-model="dialogVisible" width="50%">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="内容" prop="content">
                    <el-input type="textarea" v-model="form.content" style="width: 80%"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-button type="primary" @click="save">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>





</template>

<script>
    import request from "../utils/request";

    export default {
        name: "BookInformation",
        created() {
            console.log(this.$route.params.id)
            this.getBookById(this.$route.params.id);
            this.setBrowserHistory()
        },
        data() {
            return {
                id: this.$route.params.id,
                book: {},
                nickName: '',
                chapter: {},
                rankList: {},
                dialogVisible: false,
                form:{},
                rules: {
                    content: [{required: true, message: '请输入', trigger: 'blur'},],

                },
            }
        },
        methods: {
            getBookById(id) {
                request.get("book/getBook").then(res => {
                    this.rankList = res.data.rankList
                })
                request.get("/book/getBookById/" + id).then(res => {
                    // console.log(res)
                    this.book = res.data
                    this.getUserName(res.data.userId)
                    this.getChapterByBookId(res.data.id)
                })

            },
            getUserName(id) {
                request.get("/user/getUserName/" + id).then(res => {
                    this.nickName = res.data.nickName
                })
            },
            getChapterByBookId(id) {
                request.get("/chapter/getChapterByBookId/" + id).then(res => {
                    // console.log(res)
                    this.chapter = res.data
                })
            },
            setBrowserHistory() {
                let form = {
                    bookId: this.id,
                }
                request.post("browserHistory", form).then(res => {
                    console.log(res)
                })
            },
            addBookrack() {
                let form = {
                    bookId: this.id,
                }
                request.post("bookrack", form).then(res => {
                    console.log(res)
                    if (res.code === "0") {
                        this.$message({
                            type: "success",
                            message: res.data
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                })
            },
            addFavorite() {
                let form = {
                    bookId: this.id,
                }
                request.post("favorite", form).then(res => {
                    console.log(res)
                    if (res.code === "0") {
                        this.$message({
                            type: "success",
                            message: res.msg
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                })
            },
            openMessage() {
                this.dialogVisible = true

            },
            save(){
                this.form.bookId = this.id;
                console.log(this.form)
                request.post("message",this.form).then(res=>{
                    console.log(res)
                    if (res.code==="0"){
                        this.$message({
                            type: "success",
                            message: res.data
                        })
                        this.dialogVisible = false
                        this.form = {}
                    }else if(res.code === "-2"){
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }else {
                        this.$message({
                            type: "error",
                            message: "系统错误！"
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>